HTMLify
style.css
Views: 7 | Author: cody
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
overflow-x: hidden;
overscroll-behavior-y: none;
}
.img-gallery-ctr {
height: 200vh;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-inline: 1rem;
padding-block: 10vh;
}
.img-gallery-ctr.order {
}
.img-gallery_content {
cursor: pointer;
position: relative;
border-radius: 0.5rem;
margin-bottom: 1em;
max-width: 800px;
width: 100%;
margin-inline: auto;
overflow: hidden;
flex: 1;
transition: flex 0.5s ease-in-out;
}
.img-gallery_content:hover {
flex: 10;
}
.img-gallery_content.reorder {
position: fixed;
top: 40%;
width: 100%;
height: 200px;
}
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.btn {
font-family: "poppins", sans-serif;
cursor: pointer;
width: 10em;
height: 5rem;
z-index: 10;
position: fixed;
right: 10px;
top: 0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
outline: transparent;
border: none;
}